<template>
   <div class="login-details">
      <m-header v-if="userName"
                :user-name="userName"
                :hidden-nav='hiddenNav'
                :hidden-head-portrait='hiddenHeadPortrait'
      ></m-header>
      <div class="login-details-conten">
         <el-tabs v-model="activeName">
            <el-tab-pane label="用户管理" name="userfirst">
               <div>
                  <user-management></user-management>
               </div>
            </el-tab-pane>
            <el-tab-pane label=" 收藏管理 " name="second">
               <collections v-if="collection !== null"
                            :collection="collection"
                            @collection = "_dataInt"
               ></collections>
               <div class="collection-Administration" v-else>
                  你目前还没有收藏任何商品
               </div>
            </el-tab-pane>
            <el-tab-pane label="购物车" name="third">
               <div class="collection-Administration">
                  目前还未实现
               </div>
            </el-tab-pane>
         </el-tabs>
      </div>
      <m-footer></m-footer>
   </div>
</template>

<script>
   import MHeader from '../header-nav/header-nav'
   import userManagement from '../user-management/user-management'
   import MFooter from '../meizu-footer-wrap/meizu-footer-wrap'
   import collections from '../collections-box/collections-box'
   import {mapGetters} from 'vuex'

   export default {
      name: "login-details",
      data() {
         return {
            activeName: 'userfirst',
            result: null
         };
      },
      computed: {
         ...mapGetters([
            'loginMessage'
         ]),
         userName() {
            if (this.loginMessage) {
               return this.loginMessage.user.userName
            } else {
               return ''
            }
         },
         hiddenNav() {
            return false
         },
         hiddenHeadPortrait() {
            return false
         },
         collection() {
            return this.result
         }
      },
      beforeRouteEnter(to, from, next) {
         next(async vm => {
            vm._dataInt(vm)
         })
      },
      mounted() {
      },
      methods: {
         async _dataInt(vm) {
            let vms = vm ? vm : this
            console.log('ID', vms.loginMessage.user._id)
            let data = await vms.$axios.post('/apis/collection/collection', {
               find: true,
               id : vms.loginMessage.user._id
            })
            if (Object.keys(data.data.result).length) {
               vms.result = data.data.result
            } else {
               vms.result = null
            }
         }
      },
      components: {
         MHeader,
         userManagement,
         MFooter,
         collections
      }
   }
</script>

<style scoped lang="stylus">
   .login-details-conten
      height auto
      margin 0 auto
      margin-top 40px
      width 1240px
   .collection-Administration
      text-align center
      line-height 400px
      font-size 50px
      color #666666
      width 100%
      height 400px
</style>
